<template>
  <div class="ebook" id="mybookdiv">
    <div class="tzc_left">
      <ContentView :navigation="navigation" :bookAvailable="bookAvailable" @jumpTo="jumpTo"/>
    </div>
    <div class="tzc_right">
      <title-bar :resDATA="DATA"></title-bar>
      <div class="reader-wrapper">
        <div id="reader"></div>
        <div class="mask">
          <div class="left" @click="prevPage"></div>
          <div class="center" @click="toggleTitleAndMenu"></div>
          <div class="right" @click="nextPage"></div>
        </div>
      </div>
      <menu-bar ref="menuBar" :fontSizeList="fontSizeList" :defaultFontSize="defaultFontSize" @setFontSize="setFontSize" :themeList="themeList" :defaultTheme="defaultTheme" @setTheme="setTheme" :bookAvailable="bookAvailable" @onProgressChange="onProgressChange" :navigation="navigation" @jumpTo="jumpTo"></menu-bar>
    </div>
  </div>
</template>

<script>
import titleBar from '@/components/TitleBar';
import menuBar from '@/components/MenuBar';
import ContentView from '@/components/Content';
// 引入epubjs
import Epub from 'epubjs'
import {articlelist,articleinfo} from '@/api/api';
// 定义电子书路径
// const DOWNLOAD_URL = '/static/1449504.epub'
export default {
  name: 'ebook',
  data () {
    return {
      guid:this.$route.params.id,
      DOWNLOAD_URL:'',
      DATA:{},
      // 定义顶部和底部的菜单栏的显示状态（显示或隐藏 用于v-show）
      ifTitleAndMenuShow: false,
      fontSizeList: [
        { fontSize: 12 },
        { fontSize: 14 },
        { fontSize: 16 },
        { fontSize: 18 },
        { fontSize: 20 },
        { fontSize: 22 },
        { fontSize: 24 }
      ],
      defaultFontSize: 18,
      themeList: [
        {
          name: 'default',
          style: {
            body: {
              'color': '#000', 'background': '#ffffff'
            }
          }
        },
        {
          name: 'eye',
          style: {
            body: {
              'color': '#000', 'background': '#ceeaba'
            }
          }
        },
        {
          name: 'night',
          style: {
            body: {
              'color': '#fff', 'background': '#000000'
            }
          }
        },
        {
          name: 'gold',
          style: {
            body: {
              'color': '#000', 'background': 'rgb(241, 236, 224)'
            }
          }
        }
      ],
      defaultTheme: 0,
      bookAvailable: false,
      navigation: null
    }
  },
  methods: {
    //  获取电纸书在线地址
    Booksinfo(){
      let query={
        guid:this.guid
      }
      articleinfo(query).then((res) => {
        console.log("ss",res)
        this.DOWNLOAD_URL=res.data.mydata.file;
        this.DATA=res.data.mydata
        console.log("fewf",this.DOWNLOAD_URL);
        this.showEpub ();
      }).catch((err) => {
        console.log(err);
      });
    },
    // 电子书的解析和渲染方法
    showEpub () {
      // 生成book
      let wh_mask=document.getElementsByClassName("mask")[0];
      let wh_mask2=document.getElementsByClassName("left")[0];
      console.log("ss",wh_mask.clientWidth);
      console.log("ss2",wh_mask2.style.height)
      this.book = new Epub(this.DOWNLOAD_URL);
      // 生成randition对象，需要通过book.renderTo
      this.rendition = this.book.renderTo('reader', {
        width: wh_mask.clientWidth,
        //height: wh_mask.clientHeight
        height: document.documentElement.clientHeight-120
      })
      // 通过rendition.display 渲染电子书
      this.rendition.display()
      // 获取themes对象
      this.themes = this.rendition.themes
      // 设置默认字体
      this.setFontSize(this.defaultFontSize)
      // this.themes.register(name, styles)
      // this.themes.select(name)
      this.registerTheme()
      this.setTheme(this.defaultTheme)
      // 获取locations对象,需要通过epubjs的钩子函数实现
      this.book.ready.then(() => {
        // 该对象下toc下存放者目录的信息和目录对应的页面地址
        this.navigation = this.book.navigation
        console.log(typeof this.navigation)
        console.log(this.navigation)
        return this.book.locations.generate()
      }).then(result => {
        this.locations = this.book.locations
        console.log(this.locations)
        this.bookAvailable = true
        // this.onProgressChange(100) //跳转到结尾
      })
    },
    // 电子书切换到上一页
    prevPage () {
      this.rendition.prev()
    },
    // 电子书切换到下一页
    nextPage () {
      this.rendition.next()
    },
    // 标题栏菜单栏的显示隐藏
    toggleTitleAndMenu () {
      this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
      if (this.ifTitleAndMenuShow === false) {
        this.$refs.menuBar.hideSetting()
      }
    },
    // 设置书的字号
    setFontSize (fontSize) {
      this.defaultFontSize = fontSize
      if (this.themes) {
        this.themes.fontSize(fontSize + 'px')
      }
    },
    // 注册颜色主题
    registerTheme () {
      this.themeList.forEach(theme => {
        this.themes.register(theme.name, theme.style)
      })
    },
    // 设置颜色主题
    setTheme (index) {
      this.themes.select(this.themeList[index].name)
      this.defaultTheme = index
    },
    // 进度条改变，progress 进度条的数值（0-100)
    onProgressChange(progress) {
      const percentage = progress / 100
      const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
      this.rendition.display(location)
    },
    // 根据目录链接跳转到指定位置,跳转的时候需要设置标题栏和菜单栏隐藏
    jumpTo (href) {
      this.rendition.display(href)
      // this.hideTitleAndMenu()
    },
    // 点击跳转的时候需要隐藏的元素
    hideTitleAndMenu () {
      // 隐藏菜单栏和标题栏
      this.ifTitleAndMenuShow = false
      // 隐藏菜单弹出的设置拦
      this.$refs.menuBar.hideSetting()
      // 隐藏目录
      this.$refs.menuBar.hideContent()
    }
  },
  components: {
    titleBar,
    menuBar,
    ContentView
  },
  mounted () {
    this.Booksinfo();
    // this.showEpub();
  }
}
</script>

<style lang="scss" scoped>
@import '~styles/global';

.ebook{
  overflow-y: hidden;
  position: relative;
  .tzc_left{
    width: 25%;
    height: 100%;
    float: left;
    overflow: hidden;
  }
  .tzc_right{
    width: 75%;
    float: right;
  }
  .reader-wrapper{
    // overflow-y: auto;
    #reader{
      padding-top: px2rem(50);
      // padding-bottom: px2rem(60);
    }
    .mask{
      position: absolute;
      top: px2rem(50);
      left: 25%;
      bottom: px2rem(60);
      width: 75%;
      height: auto;
      z-index: 100;
      display: flex;
      .left{
        width: 100%;
        flex: 1;
      }
      .center{
        width: 100%;
        flex: 1;
      }
      .right{
        width: 100%;
        flex: 1;
      }
    }
  }
  
}
</style>
